<div class="flex-column d-flex align-items-stretch h-100">
  <div class="row mb-3">
    <div class="col-6">
      <h3 class="primary-text m-0 font-monospace">startup.sh</h3>
    </div>
    <div class="col-6 text-end">
      <button class="btn btn-primary waves-effect m-0" (click)="onSave()" [disabled]="saveInProgress">
        @if (saveInProgress) {
        <i class="fas fa-spinner fa-pulse"></i>
        } @else {
        <i class="fas fa-floppy-disk"></i>
        }
      </button>
    </div>
  </div>
  @if (!isMobile) {
  <ngx-monaco-editor
    class="flex-grow-1 h-100 w-100 my-2"
    [options]="editorOptions"
    [model]="monacoEditorModel"
    (onInit)="onEditorInit($event)"
    (keydown.control.s)="$event.preventDefault(); onSave()"
    (keydown.meta.s)="$event.preventDefault(); onSave()"
  />
  } @if (isMobile) {
  <textarea
    wrap="off"
    class="hb-plain-text-editor align-self-end h-100 w-100 my-2"
    autocomplete="off"
    autocorrect="off"
    autocapitalize="off"
    spellcheck="false"
    [(ngModel)]="startupScript"
  >
  </textarea>
  }
</div>
